<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
    <br>
    <a href="">百度</a>
    <br>
    <a>百度</a>
    <br>
    <!-- 不执行javascript功能脚本 -->
    <a href="javascript:void(0);">百度</a>
    <br>
    <a href="https://www.baidu.com" onclick="return false">百度</a>
    <br>
    <a  href="https://www.baidu.com" onclick="preventEvent(event)">百度</a>
    <br><br>
    <input type="button" value="静态一次性事件" id="btn" onclick="printInfo()">  
    <br><br>
    <input type="button" value="动态一次性事件" id="btn1">
    <script>
        function preventEvent(event){
            console.log(event)
            // preventDefault
            event.preventDefault(); // 阻止默认事件操作
        }

        let btnDom = document.querySelector("#btn");
        function printInfo(){
            console.log("一次性事件printInfo");
            // btnDom.onclick = null;
        }

        let btnDom1 = document.querySelector("#btn1");
        btnDom1.addEventListener("click",function aa(){
            console.log("动态一次性事件")
            btnDom1.removeEventListener("click",aa)
        })
    </script>
    <hr>
    <div id="app">
        <!-- contenteditable 内容编辑模式 -->
        <pre v-pre class="note" >
        Vue 事件行为修饰符
            * .prevent ：为事件添加阻止默认事件功能（调用js event.preventDefault()）
                        标签自带功能的相关事件
            * .once : 被该修饰符修饰的事件一旦被调用一次后，会直接删除事件绑定 - 一次性事件
        </pre>
        <p>阻止默认事件</p>
        <a  href="https://www.baidu.com" @click.prevent>百度</a>
        <br><br>
        <form action="https://www.baidu.com" @submit.prevent>
            <input type="submit" value="提交">
        </form>
        <br>
        <!-- 右键菜单事件  oncontextmenu-->
        <div class="box" @contextmenu.prevent></div>
        <p>一次性事件</p>
        <input type="button" value="一次性事件" @click.once="printMsg()">
    </div>
    <script type="module">
        
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                   
                }
            },
            methods:{
                printMsg(){
                    console.log("一次性事件")
                }
            }
        }).mount("#app");
    </script>
</body>
</html>